<template>
  <div style="min-height:460px;">
    <el-container>
      <el-main style="padding-right:320px;">
        <el-row>
          <el-col :span="6">
            <span class="selectTitle">选择流程</span>
            <el-select
              @change="flowChange"
              filterable
              size="mini"
              :style="topInput"
              v-model="selectFlow"
              placeholder="请选择流程"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span class="selectTitle">系统类型</span>
            <el-select
              size="mini"
              v-model="InsuranceName"
              placeholder="请选择系统类型"
              @change="InsuranceChange"
              :style="topInput"
              :disabled="topDisabled"
            >
              <el-option label="社保" value="2"></el-option>
              <el-option label="医保" value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span class="selectTitle">系统名称</span>
            <el-select
              size="mini"
              @change="sysNameChange"
              v-model="sysName"
              placeholder="请选择系统名称"
              :disabled="sysNameDisabled"
              :style="topInput"
            >
              <el-option
                :key="item.code"
                :label="item.name"
                v-for="item of systemNameOptions"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span class="selectTitle">事项名称</span>
            <el-select
              size="mini"
              filterable
              v-model="itemName"
              placeholder="请选择事项名称"
              :disabled="itemNameDisabled"
              @change="itemChange"
              :style="topInput"
            >
              <el-option
                v-for="(item,index) in itemSelectOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <div class="flowImg">
          <p class="showTitle" v-show="!isShow">请选择流程</p>
          <img class="flowPic" v-show="isShow" :src="itemImg">
        </div>
        <div class="flowTable" v-show="isShow">
          <el-tabs v-model="activeName" @tab-click="tabClick">
            <el-tab-pane label="事项配置" name="first">
              <el-form ref="bottomForm" :model="bottomForm" label-width="80px" class="bottomForm">
                <el-row v-if="this.$route.query.type == 'edit'">
                  <el-col :span="8">
                    <el-form-item label="事项版本:" label-width="120px">{{this.$route.query.itemName}}</el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="版本号:" label-width="120px">{{this.versionNumber}}</el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <el-form-item label="事项版本状态:" label-width="120px">
                      <el-radio-group v-model="bottomForm.radio">
                        <el-radio label="1">生效</el-radio>
                        <el-radio label="0">失效</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="buttomRow">
                  <el-col style="width:120px">
                    <el-checkbox v-model="bottomForm.checked" @change="checkedChange">事项办理时限:</el-checkbox>
                  </el-col>
                  <el-col :span="4">
                    <el-input size="mini" :disabled="configDisabled" v-model="bottomForm.timeLimit"></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-select
                      size="mini"
                      :disabled="configDisabled"
                      v-model="bottomForm.timeLimitType"
                      placeholder="请选择"
                    >
                      <el-option label="小时" value="0"></el-option>
                      <el-option label="工作日" value="1"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="任务配置" name="second">
              <el-table
                highlight-current-row
                @row-click="handleCurrentChange"
                size="small"
                :data="tableData"
                border
                :row-class-name="rowClassName"
                style="width: 100%"
              >
                <el-table-column align="center" prop="id" label="任务ID"></el-table-column>
                <!-- <el-table-column align="center" prop="name" label="任务名称"></el-table-column> -->
                <!-- <el-table-column align="center" prop="alias" label="重命名"></el-table-column> -->
                <el-table-column align="center" prop="menuName" label="菜单名称"></el-table-column>
                <el-table-column align="center" prop="proceedingRound" label="事项环节"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
      <el-aside width="300px" v-show="rightIsShow" class="aside">
        <flow-info
          id="scrollBar"
          @saveTrue="saveTrue"
          @checkedTrue="checkedTrue"
          @isClick="FisClick"
          @isClickTrue="isClickTrue"
          :flowId="flowId"
          :menuName="menuName"
          :isTask="isTask"
          :flowName="flowName"
          :taskId="taskId"
          :taskName="taskName"
          :menuId="menuId"
          :itemImg="itemImg"
          :branchNum="branchNum"
          :sortNum="sortNum"
          :alias="alias"
          :dataPic="dataPic"
          :proceedingRoundDate="proceedingRoundDate"
          :circulationMode="circulationMode"
          :proceed="proceed"
          :itemName="itemName"
          :InsuranceName="InsuranceName"
          :bottomForm="bottomForm"
          :isClick="isClick"
          :timeLimitDate="timeLimitDate"
          :time_limit_typeData="time_limit_typeData"
          :nodeId="nodeId"
          :proceedingProcedefId="proceedingProcedefId"
          :riskControlNoticeData="riskControlNoticeData"
        ></flow-info>
      </el-aside>
      <el-footer class="footer">
        <el-button type="primary" @click="saveData">保存</el-button>
        <el-button type="warning">取消</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import FlowInfo from "./FlowInfo";

import merge from "webpack-merge";
export default {
  components: {
    FlowInfo
  },
  data() {
    return {
      bottomForm: {
        radio: "0",
        checked: false,
        timeLimit: "",
        timeLimitType: ""
      },
      riskControlNoticeData: "",
      nodeId: "",
      topDisabled: false,
      isClick: false,
      systemNameOptions: [],
      bottomCheckedTrue: false,
      activeName: "first",
      topInput: "width:150px",
      selectOptions: [],
      itemSelectOptions: [],
      tableData: [],
      selectFlow: "",
      isShow: false,
      rightIsShow: false,
      itemImg: "",
      itemId: this.$route.query.itemId,
      taskId: "",
      configDisabled: true,
      taskName: "",
      flowId: "",
      flowName: "",
      isTask: "1",
      menuName: "",
      menuId: 0,
      branchNum: "",
      sortNum: "",
      isMenuShow: true,
      alias: "",
      proceedingRoundDate: "",
      dataPic: "",
      circulationMode: "",
      proceed: "",
      refresh: "",
      sysNameDisabled: false,
      itemNameDisabled: true,
      InsuranceName: this.$route.query.InsuranceName,
      sysName: this.$route.query.sysName ? this.$route.query.sysName : "",
      itemName: this.$route.query.itemId ? this.$route.query.itemId : "",
      saveTrueValue: 0,
      timeLimitDate: "",
      time_limit_typeData: "",
      versionNumber: "",
      proceedingProcedefId: this.$route.query.proceedingProcedefId
        ? this.$route.query.proceedingProcedefId
        : ""
    };
  },
  created() {
    // 获取系统列表
    this.$get("/system/wfSystemList", {
      type: this.$route.query.InsuranceName,
      pageNum: 1,
      pageSize: 1000
    }).then(data => {
      if (data.data.success) {
        this.systemNameOptions = data.data.result.dataList;
      }
    });

    this.$get("/processconfig/getProcessList", {
      page: 1,
      pageSize: 1000
    }).then(data => {
      this.selectOptions = data.data.result.dataList;
    });
    //新建
    if (this.$route.query.type == "add") {
      this.$post("/proceeding/list", {
        pageNum: 1,
        pageSize: 1000,
        systemCode: this.sysName,
        hasInited: "0"
      }).then(data => {
        this.itemSelectOptions = data.result.dataList;
      });
      this.topDisabled = false;
      this.sysNameDisabled = false;
      this.itemNameDisabled = false;
    }
    //编辑
    if (this.$route.query.type == "edit") {
      this.$post("/proceeding/list", {
        pageNum: 1,
        pageSize: 1000,
        systemCode: this.sysName
      }).then(data => {
        this.itemSelectOptions = data.result.dataList;
      });

      this.topDisabled = true;
      this.sysNameDisabled = true;
      this.itemNameDisabled = true;
      // this.selectFlow = this.$route.query.procedefId

      if (this.itemId) {
        this.versionNumber = this.$route.query.versionNumber;
        this.$get("/proceeding/getProcessInFo", {
          id: this.itemId,
          procedefId: this.$route.query.procedefId,
          versionNumber: this.versionNumber
        }).then(data => {
          if (data.data.code == "00") {
            this.tableData = data.data.result.dataList;
            // this.selectOptions.push(data.data.result);

            this.flowChange(data.data.result.procedefId);
            this.selectFlow = data.data.result.procedefId;
            this.bottomForm.timeLimit = data.data.result.timeLimit;
            this.bottomForm.timeLimitType = data.data.result.timeLimitType;
            this.bottomForm.radio = data.data.result.isUse;
            this.timeLimitDate = data.data.timeLimit;
            this.time_limit_typeData = data.data.time_limit_type;
            // if (this.bottomForm.timeLimit) {
            //   this.bottomForm.checked = true;
            //   this.configDisabled = false;
            // }

            if (this.bottomForm.timeLimit) {
              this.bottomForm.checked = true;
              this.configDisabled = false;
            } else {
              this.configDisabled = true;
              this.bottomForm.timeLimit = "";
              this.bottomForm.timeLimitType = "";
            }
          }
        });
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this._scroll);

    // if (this.InsuranceName == "社保") {
    //   this.sysNameDisabled = false;
    // }
  },
  watch: {
    proceedingProcedefId(val) {
      return val;
    },
    selectOptions: {
      deep: true,
      handler(val) {
        this.flowChange(this.selectFlow);
        return val;
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this._scroll);
  },
  methods: {
    saveData() {
      if (!this.itemName) {
        this.$message.error("请先选择事项名称");
        return;
      }
      if (this.rightIsShow) {
        if (!this.proceedingProcedefId) {
          this.$message.error("请先保存左侧事项配置");
          return;
        }
        this.isClick = true;
        return;
      } else {
        this.$post("/proceeding/save", {
          diagramResourceName: this.dataPic,
          id:
            this.proceedingProcedefId || this.$route.query.proceedingProcedefId,
          isUse: this.bottomForm.radio,
          procedefId: this.$route.query.procedefId || this.selectFlow,
          // proceedingId: this.flowId,
          proceedingId: this.itemName,
          timeLimit: this.bottomForm.timeLimit,
          timeLimitType: this.bottomForm.timeLimitType
        }).then(data => {
          if (data.success) {
            this.$router.push({
              query: merge(this.$route.query, {
                versionNumber: data.result.versionNumber,
                proceedingProcedefId: data.result.id
              })
            });
            this.versionNumber = data.result.versionNumber;
            this.proceedingProcedefId = data.result.id;
            this.$get("/proceeding/getProcessInFo", {
              id: data.result.proceedingId,
              procedefId: data.result.procedefId,
              versionNumber: this.versionNumber
            }).then(data => {
              this.bottomForm.timeLimit = data.data.result.timeLimit;
              this.bottomForm.timeLimitType = data.data.result.timeLimitType;
              this.bottomForm.radio = data.data.result.isUse;
            });
          }
          this.$mess(data);
        });
      }
    },
    FisClick() {
      this.isClick = false;
    },
    isClickTrue(val) {
      this.versionNumber = val.versionNumber;
      this.proceedingProcedefId = val.id;
      this.$get("/proceeding/getProcessInFo", {
        id: val.proceedingId,
        procedefId: val.procedefId,
        versionNumber: this.versionNumber
      }).then(data => {
        if (data.data.code == "00") {
          this.tableData = data.data.result.dataList;
        }
      });
    },
    tabClick() {
      if (this.activeName == "first") {
        this.rightIsShow = false;
      } else {
        this.rightIsShow = true;
      }
    },
    checkedTrue(val) {
      this.bottomCheckedTrue = val;
    },
    checkedChange() {
      if (this.bottomCheckedTrue) {
        this.$message.error("当前事项已设置任务办理时限，请取消后再尝试设置");
        // this.configDisabled = true
        this.bottomForm.checked = false;
      } else {
        // this.configDisabled = false
      }
      if (this.bottomForm.checked) {
        this.configDisabled = false;
      } else {
        this.configDisabled = true;
        this.bottomForm.timeLimit = "";
        this.bottomForm.timeLimitType = "";
      }
    },
    rowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    itemChange(value) {
      this.itemName = value;
    },
    flowChange(value) {
      if (this.$route.query.type == "add") {
        this._addChange(value);
      }
      if (this.$route.query.type == "edit") {
        this.refresh = value;

        this._editChange(value);
      }
      // ;
    },
    InsuranceChange() {
      // if (this.InsuranceName == "社保") {
      //   this.sysNameDisabled = false;
      // } else {
      //   this.sysNameDisabled = true;
      //   this.itemNameDisabled = true;
      //   this.sysName = "";
      //   this.itemName = "";
      // }
    },
    sysNameChange() {
      this.$post("/proceeding/list", {
        pageNum: 1,
        pageSize: 1000,
        systemCode: this.sysName,
        hasInited: ""
      }).then(data => {
        this.itemSelectOptions = data.result.dataList;
      });
      // if (this.sysName) {
      //   this.itemNameDisabled = false;
      // }
      // if (this.$route.query.type == "add") {
      //   this.$post("/proceeding/list", {
      //     pageNum: 1,
      //     pageSize: 1000,
      //     systemName: this.sysName,
      //     hasInited: 0
      //   }).then(data => {
      //     this.itemSelectOptions = data.result.dataList;
      //   });
      // }
    },
    saveTrue(value) {
      //流程图下表格数据
      // if (this.$route.query.type == "edit") {
      //   this.$get("/getProcessNodeInFo", {
      //     id: this.refresh,
      //     proceedingId: this.$route.query.itemId
      //   }).then(data => {
      //     if (data.data.code == "00") {
      //       this.tableData = data.data.result.dataList;
      //     }
      //   });
      // }
      if (this.$route.query.type == "add") {
        this.tableData[this.saveTrueValue].proceedingRound = value;
      }
    },

    _addChange(value) {
      if (value) {
        this.flowId = value;
        this.isShow = true;
        this.isMenuShow = false;
        // 设置流程图片地址
        if (this.selectOptions.length > 0) {
          for (let i of this.selectOptions) {
            if (i.id == value) {
              this.itemImg =
                "/api/processconfig/showDiagramResource?pdid=" +
                value +
                "&resource=" +
                i.diagramResourceName;
              this.flowName = i.name;
              this.dataPic = i.diagramResourceName;
            }
          }
        }

        //流程图下表格数据
        this.$get("/processconfig/getNodeInformation", {
          id: value
        }).then(data => {
          this.tableData = data.data.result.dataList;
        });
      }
    },
    _scroll() {
      let scroll = document.getElementById("scrollBar");
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 80) {
        scroll.style.top = "60px";
      } else {
        scroll.style.top = "130px";
      }
    },
    _editChange(value) {
      this.flowId = value;
      this.isShow = true;
      // for (let i of this.selectOptions) {
      //   if (i.id == value) {
      //   }
      // }

      // 设置流程图片地址
      if (this.selectOptions.length > 0) {
        for (let i of this.selectOptions) {
          if (i.id == value) {
            this.itemImg =
              "/api/processconfig/showDiagramResource?pdid=" +
              value +
              "&resource=" +
              i.diagramResourceName;
            this.flowName = i.name;

            this.dataPic = i.diagramResourceName;
          }
        }
      }

      //流程图下表格数据
      // this.$get("/getProcessNodeInFo", {
      //   id: value,
      //   proceedingId: this.$route.query.itemId
      // }).then(data => {
      //   if (data.data.code == "00") {
      //     this.tableData = data.data.result.dataList;
      //   }
      // });
    },
    handleCurrentChange(value) {
      if (this.$route.query.type == "add") {
        this.taskId = value.id;
        this.taskName = value.name;
        this.saveTrueValue = value.index;

        return;
      }
      this.nodeId = value.nodeId;
      this.timeLimitDate = value.timeLimit;
      this.time_limit_typeData = value.time_limit_type;
      this.riskControlNoticeData = value.riskControlNotice;
      this.isTask = String(value.taskFinalNotice);
      this.taskId = value.id;
      this.taskName = value.name;
      this.menuName = value.menuName;
      this.menuId = value.menuId;
      this.circulationMode = String(value.circulationMode);
      this.alias = value.alias;
      this.sortNum = value.sortNumber;
      this.branchNum = value.branchNumber;
      this.proceedingRoundDate = value.proceedingRoundCde;
      this.proceed = value.proceedingRound;
    }
  }
};
</script>

<style scoped lang="css">
.selectFlow {
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.selectTitle {
  margin-right: 10px;
  font-size: 14px;
}
.bottomForm {
  border: 1px solid #ccc;
  padding: 10px 20px;
  height: 200px;
}
.flowImg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 150px;
  /* background-color: #ccc; */
}
.buttomRow {
  display: flex;
  align-items: center;
}
.showTitle {
  font-size: 18px;
  color: #999999;
  font-weight: bold;
}
.flowPic {
  max-width: 100%;
}
#scrollBar {
  width: 300px;
  min-height: 460px;
  position: fixed;
  top: 110px;
  right: 10px;
  background: #fff;
  transition: 0.3s;
  box-shadow: 0 0 5px 5px #ccc;
  padding: 10px;
}
.footer {
  text-align: left;
  line-height: 60px;
  border-top: 1px solid #ccc;
}
</style>
